/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    Modal,
    Dimensions,
    Platform
} from 'react-native';

import {Actions} from 'react-native-router-flux'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {ChangeMainToolModalVisible} from '../actions/appActions';

export default class ToolModal extends Component {
    constructor (props) {
        super(props)
    }

    render() {
        return (
              <Modal
                  animationType='slide'
                  transparent={true}
                  visible={this.props.toolModalVisible}
                  onRequestClose={() => {this.props.dispatch(ChangeMainToolModalVisible(false))}}
                  >
                    <View style={styles.container}>
                        <View style={styles.toolContainer}>
                            <View style={styles.toolItem}>
                                <TouchableHighlight style={styles.toolBtnContainer} underlayColor={'#fff'}>
                                    <View style={styles.toolBtnBg}>
                                        <View style={[styles.toolBtnImgContainer,{backgroundColor:'#E5507A'}]}>
                                            <Ionicons style={styles.toolBtnImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-create'} size={30} />
                                        </View>
                                        <Text style={styles.toolBtnText}>文字</Text>
                                    </View>                            
                                </TouchableHighlight>
                            </View>
                            <View style={styles.toolItem}>
                                 <TouchableHighlight style={styles.toolBtnContainer} underlayColor={'#fff'}>
                                    <View style={styles.toolBtnBg}>
                                        <View style={[styles.toolBtnImgContainer,{backgroundColor:'#F16D5E'}]}>
                                            <Ionicons style={styles.toolBtnImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-image'} size={30} />
                                        </View>
                                        <Text style={styles.toolBtnText}>相册</Text>
                                    </View>                            
                                </TouchableHighlight>
                            </View>
                            <View style={styles.toolItem}>
                                <TouchableHighlight style={styles.toolBtnContainer} underlayColor={'#fff'}>
                                    <View style={styles.toolBtnBg}>
                                        <View style={[styles.toolBtnImgContainer,{backgroundColor:'#FEA200'}]}>
                                            <Ionicons style={styles.toolBtnImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-camera'} size={30} />
                                        </View>
                                        <Text style={styles.toolBtnText}>拍照</Text>
                                    </View>                            
                                </TouchableHighlight>
                            </View>
                            <View style={styles.toolItem}>
                                <TouchableHighlight style={styles.toolBtnContainer} underlayColor={'#fff'}>
                                    <View style={styles.toolBtnBg}>
                                        <View style={[styles.toolBtnImgContainer,{backgroundColor:'#34B87E'}]}>
                                            <Ionicons style={styles.toolBtnImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-mic'} size={30} />
                                        </View>
                                        <Text style={styles.toolBtnText}>语音</Text>
                                    </View>                            
                                </TouchableHighlight>
                            </View>
                            <View style={styles.toolItem}>
                                <TouchableHighlight style={styles.toolBtnContainer} underlayColor={'#fff'}>
                                    <View style={styles.toolBtnBg}>
                                        <View style={[styles.toolBtnImgContainer,{backgroundColor:'#5AB4D7'}]}>
                                            <Ionicons style={styles.toolBtnImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-qr-scanner'} size={30} />
                                        </View>
                                        <Text style={styles.toolBtnText}>扫一扫</Text>
                                    </View>                            
                                </TouchableHighlight>
                            </View>
                            <View style={styles.toolItem}>
                                <TouchableHighlight style={styles.toolBtnContainer} underlayColor={'#fff'}>
                                    <View style={styles.toolBtnBg}>
                                        <View style={[styles.toolBtnImgContainer,{backgroundColor:'#65CCCB'}]}>
                                            <Ionicons style={styles.toolBtnImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-pricetag'} size={30} />
                                        </View>
                                        <Text style={styles.toolBtnText}>便签</Text>
                                    </View>                            
                                </TouchableHighlight>
                            </View>                                                          
                        </View>          
                    </View>
              </Modal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end',
    },
    toolContainer:{
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding:10,
        paddingBottom:40
    },
    toolItem:{
        width: (Dimensions.get('window').width-20)/3,
        height:80,
        flexDirection: 'column',
        justifyContent:'center',
        alignItems:'center',
        marginTop:5
    },
    toolBtnContainer:{
        flex:1,
        flexDirection: 'column',
    },
    toolBtnBg:{
      justifyContent:'center',
      alignItems:'center',
    },
    toolBtnImgContainer:{
        width:50,
        height:50,
        alignItems:'center',
        justifyContent:'center',
        borderWidth: 0,
        borderRadius: 25,
        marginBottom:5
    },
    toolBtnImg:{
        color:'#fff'
    },
    toolBtnText:{
        fontSize:16
    }
});
